<template>
  <div class="particulars">

    <Myhead title="详情"></Myhead>

    <div class="hot-recommend" v-for="(item, index) in list" :key="index">
      <h2>
        {{ item.title }}
      </h2>
      <p>
        <van-icon name="chat-o">
          {{ item.address }}
        </van-icon>
      </p>

      <p class="time">
        <van-icon name="chat-o">
          {{ item.time }}
        </van-icon>
        <van-icon name="chat-o">
          热度 : {{ item.hot }}
        </van-icon>
      </p>
      <div class="lable">
        <van-tag v-for="(tag, index) in item.tags" :key="index" type="primary">
          {{ tag.label }}
        </van-tag>
      </div>
      <div v-for="v, i in item.imgs" :key="i">
        <div>
          <van-image @click="showImage(v, i)" class="recommend-image"
            :src="v.url.replace('public', 'http://81.69.235.62:3000')" />
        </div>
      </div>
      <div>
        <p>{{ item.content }}</p>
      </div>
      <div class="portrait">
        <van-image round width="80px" height="80px"
          src="https://img1.baidu.com/it/u=3306007571,1856425861&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1678294800&t=93b1149d3c01fb9a10c45e74d61ea49b" />
        <p>{{ item.author.username }}</p>
      </div>
      <div>
        <van-row class="row" justify="center">
          <van-col span="8">
            <van-icon @click="flag ? addlikeone() : dellikeone()" :name="flag ? 'good-job-o' : 'good-job'"
              :color="flag ? '#000000' : '#FF0000'">
              {{ gives.length }}
            </van-icon>
          </van-col>
          <van-col span="8">
            <van-icon @click="showBottom = true" name="more-o">
              {{ pinglist.length }}
            </van-icon>
          </van-col>
          <van-col span="8">
            <van-icon @click="flaga ? addcollectone() : delcollectone()" :name="flaga ? 'like-o' : 'like'"  :color="flaga ? '#000000' : '#FF0000'" >
              {{ loves.length }}
            </van-icon>
          </van-col>
        </van-row>
      </div>
    </div>

    <template v-if="pinglist.length > 0">
      <div>
        <van-cell-group v-for="(item, index) in pinglist" :key="index">
          <van-cell :value="item.time" :label="item.content">
            <template #title>
              <div>
                <span>{{ item.userInfo.username }}</span>
                &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                <span>评分:{{ item.rate }}</span>
              </div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>
    </template>
    <template v-else>
      <div class="empty-button">
        <van-empty image-size="200" image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png"
          description="暂无数据">
          <van-button round type="primary" @click="comments" class="bottom-button">发布按钮</van-button>
        </van-empty>
      </div>
    </template>


    <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '60%' }">
      <div class="showBottom">
        <h3 class="showBottom-h3">发布评论</h3>

        <div class="showBottom-group">
          <van-cell-group inset>
            <van-field v-model="content" rows="2" :autosize="{ maxHeight: 450, minHeight: 450 }" type="textarea"
              maxlength="200" placeholder="请输入评论" show-word-limit />
          </van-cell-group>
        </div>

        <div class="showBottom-rate">
          <van-rate v-model="rate" icon="like" void-icon="like-o" />
        </div>
        <div>
          <van-button @click="PostComment" block type="success">发布评论</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { gettravelbyidAPI, addpingsoneAPI, dellikeoneAPI, delcollectoneAPI, getpinglistAPI, addcollectoneAPI, addlikeoneAPI, GetUserInfoAPI, getcollectlistAPI, getlikelistAPI } from './findapi'
import { showImagePreview, showSuccessToast } from 'vant'
import _ from 'lodash'

let route = useRoute()

let list = ref([]) //详情
let showBottom = ref(false) //评论开关
let content = ref('') //评论内容
let rate = ref(5) //评论评
let pinglist = ref([])//评论数据
let gives = ref([])// 点赞数量
let loves = ref([]) // 喜欢数量

let flag = ref(true) //判断点赞
let flaga = ref(true)

let addping = reactive({
  tid: '',
  time: '',
  travel: {},
  userInfo: {},
  phone: '',
})

let GetUserInfo = async () => {
  let res = await GetUserInfoAPI({})
  addping.userInfo = res.data.result
}

const showImage = async (item) => { //图片放大显示
  showImagePreview([
    item.url
  ]);
}

const comments = () => {  //评论开关
  showBottom.value = true
}

const getlikelist = async () => { //查看点赞 
  let res = await getlikelistAPI({
    phone: addping.phone,
    tid: addping.tid
  })
  gives.value = []
  res.data.result.forEach(item => {
    if (route.query.id == item.tid) {
      if (item.phone == addping.phone) {
        flag.value = false
      }
      gives.value.push(item)
    }
  })
}
const getcollectlist = async () => { //查看喜欢 
  let res = await getcollectlistAPI({
    phone: addping.phone,
    tid: addping.tid
  })
  loves.value = []
  res.data.result.forEach(item => {
    if (route.query.id == item.tid) {
      if (item.phone == addping.phone) {
        flaga.value = false
      }
      loves.value.push(item)
    }
  })
}

// 添加点赞
const addlikeone = _.debounce(async function () {
  flag.value = !flag.value
  await addlikeoneAPI({
    phone: addping.phone,
    tid: addping.tid,
    travel: addping.travel,
    userInfo: addping.userInfo
  })
  getlikelist()
}, 300)
// 取消点赞
const dellikeone = _.debounce(async function () {
  flag.value = !flag.value
  await dellikeoneAPI({
    phone: addping.phone,
    tid: addping.tid
  })
  getlikelist()
}, 300)


// 添加喜欢
const addcollectone = _.debounce(async function () {
  flaga.value = !flaga.value
  await addcollectoneAPI({
    phone: addping.phone,
    tid: addping.tid,
    travel: addping.travel,
    userInfo: addping.userInfo
  })
  getcollectlist()
}, 300)

// 取消喜欢
const delcollectone = _.debounce(async function () {
  flaga.value = !flaga.value
  await delcollectoneAPI({
    phone: addping.phone,
    tid: addping.tid
  })
  getcollectlist()
}, 300)




const gettravelbyid = async () => {  //详情页数据
  let _id = route.query.id
  let res = await gettravelbyidAPI({ _id })
  let array = res.data.result
  array.imgs.forEach(item => {
    item.url = item.url.replace('public', 'http://81.69.235.62:3000')
  })
  addping.tid = array._id
  addping.time = array.time
  addping.travel = array.tags
  addping.phone = array.author.phone
  list.value.push(array)
}

const getpinglist = async () => { //评论数据
  let tid = route.query.id
  let res = await getpinglistAPI({ tid: tid })
  let item = res.data.result
  pinglist.value = item
}


const PostComment = async () => { //添加评论
  if (content.value) {
    let res = await addpingsoneAPI({
      content: content.value,
      rate: rate.value,
      ...addping
    })
    if (res.data.code == 200) {
      showBottom.value = false
      getpinglist()
      showSuccessToast('发布成功');
    }
  } else {
    showFailToast('未输入');
  }
}

onMounted(() => {
  gettravelbyid()
  getpinglist()
  getlikelist()
  getcollectlist()
  GetUserInfo()
})

</script>

<style lang="scss" scoped>
.particulars {
  width: 100%;
  height: 86%;
  box-sizing: border-box
}

.hot-recommend {
  height: 90%;
  background-color: #fff;
  border: 1px solid #999;
  border-radius: 10px;
  padding-top: 50px;
  padding: 10px;
  margin: 10px;
  margin-top: 0;

  .time {
    display: block;
    display: flex;
    justify-content: space-between;
  }

  p {
    margin-top: 10px;
  }

  .lable {
    .van-tag {
      margin-top: 10px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }

  .recommend-image {
    text-align: center;
    width: 100%;
    height: 300px;
  }

  .portrait {
    margin-top: 10px;
  }

}

.row {
  margin-left: 60px;
}

.van-empty {
  height: 300px;
  padding-top: 0;
  padding-bottom: 80px;
}

.showBottom {
  padding: 10px;
  height: 100%;
  width: 100%;
  box-sizing: border-box
}

.showBottom-h3 {
  margin-top: 0px;
  font-size: 16px;
  text-align: center;
  margin-bottom: 10px;
}

.showBottom-group {
  width: 100%;
  height: 70%;
  border: 1px solid #999;
  border-radius: 5%;
}

.showBottom-rate {
  margin: 10px 0;
}
</style>
